<template>
  <!--应付单-->
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-row>
        <el-col :span="10">
          <!--<el-button class="filter-item" size="small" style="margin-left: 10px;"-->
                     <!--@click="handleCreate" type="primary" icon="el-icon-plus">新增-->
          <!--</el-button>-->
          <el-button  v-if="isUpdate  != 1" class="filter-item" size="small" style="margin-left: 10px;"
                     @click="createData" type="primary" icon="el-icon-edit">保存新增
          </el-button>
          <el-button v-else class="filter-item" size="small" style="margin-left: 10px;"
                     @click="updateData" type="primary" icon="el-icon-edit">保存编辑
          </el-button>
          <el-button class="filter-item" size="small" style="margin-left: 10px;" @click="handleClean" type="primary"
                     icon="el-icon-delete" :disabled="isDisableStatus">清空
          </el-button>
          <el-button class="filter-item" size="small" type="primary"
                     v-waves icon="el-icon-circle-plus-outline" @click="queryPayOrderList" :disabled="isDisableStatus">关联业务订单
          </el-button>
        </el-col>
      </el-row>
      <div style="clean:both"></div>
    </div>

    <div style="clean:both; height: 10px"></div>

    <!-- 主表新增 -->
    <el-form :rules="rules" ref="dataForm" :model="temp" label-position="right" label-width="100px">
      <el-row>
        <!-- 第一列 -->
        <el-col :span="6">
          <!--<el-form-item label="单据编码" prop="docCode">-->
            <!--<el-input v-model="temp.docCode" :maxlength="20" clearable></el-input>-->
          <!--</el-form-item>-->
          <el-form-item label="单据类型" prop="docType">
            <el-select v-model="temp.docType" placeholder="请选择"
                       :clearable="true" class="input_width" :disabled="isDisableStatus" @change="docTypeChange">
              <el-option
                v-for="item in shouldPaymentTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="结算公司" prop="settlCompanyId">
            <el-select v-model="temp.settlCompanyId" placeholder="请选择"
                       :clearable="true" class="input_width" :disabled="isDisableStatus">
              <el-option
                v-for="item in companyList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="主体公司" prop="mainCompanyId">
            <el-select v-model="temp.mainCompanyId" placeholder="请选择"
                       :clearable="true" class="input_width">
              <el-option
                v-for="item in companyList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="供应商" prop="partnerId">
            <el-select v-model="temp.partnerId" placeholder="请选择" filterable
                       :clearable="true" class="input_width" :disabled="isDisableStatus">
              <el-option
                v-for="item in partnerList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="收支项目" prop="ipItemId">
            <el-select v-model="temp.ipItemId" placeholder="请选择"
                       :clearable="true" class="input_width" :disabled="isDisableStatus">
              <el-option
                v-for="item in incomePayItemList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="税率" prop="cess">
            <el-select v-model="temp.cess" placeholder="请选择"
                       class="input_width" :disabled="isDisableStatus" @change="priceOrCessChange">
              <el-option
                v-for="item in cessList"
                :key="item.id"
                :label="item.value"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 第二列 -->
        <el-col :span="6">
          <el-form-item label="立账日期" prop="buildAccountDate">
            <el-date-picker
              v-model="temp.buildAccountDate"
              type="date" class="input_width"
              value-format="yyyy-MM-dd" format="yyyy-MM-dd"
              placeholder="选择立账结束时间"
              :disabled="isDisableStatus">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="会计期间" prop="fiscalPeriod">
            <el-select v-model="temp.fiscalPeriod" placeholder="请选择"
                       :clearable="true" class="input_width" :disabled="fiscalPeriodFlag">
              <el-option
                v-for="item in fiscalPeriodDetailList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部门" prop="departmentId">
            <el-select v-model="temp.departmentId" placeholder="请选择"
                       :clearable="true" class="input_width" :disabled="isDisableStatus">
              <el-option
                v-for="item in departmentList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务员" prop="staffId">
            <el-select v-model="temp.staffId" placeholder="请选择"
                       :clearable="true" class="input_width" :disabled="isDisableStatus">
              <el-option
                v-for="item in staffList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="存货" prop="stockGoodsId">
            <el-select v-model="temp.stockGoodsId" placeholder="请选择"
                       :clearable="true" class="input_width" :disabled="isDisableStatus">
              <el-option
                v-for="item in stockGoodList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目核算" prop="project">
            <el-select v-model="temp.project" placeholder="请选择" filterable
                       :clearable="true" class="input_width">
              <el-option
                v-for="item in projectItemList"
                :key="item.code"
                :label="item.code+' - '+item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 第三列 -->
        <el-col :span="6">
          <el-form-item label="发票号" prop="invoiceCode">
            <el-input v-model="temp.invoiceCode" :maxlength="20" clearable :disabled="isDisableStatus"></el-input>
          </el-form-item>
          <el-form-item label="发票日期" prop="invoiceDate">
            <el-date-picker
              v-model="temp.invoiceDate"
              type="date" class="input_width"
              value-format="yyyy-MM-dd" format="yyyy-MM-dd"
              placeholder="选择发票日期"
              :disabled="isDisableStatus">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="单据日期" prop="docDate">
            <el-date-picker
              v-model="temp.docDate"
              type="date" class="input_width"
              value-format="yyyy-MM-dd" format="yyyy-MM-dd"
              placeholder="选择单据日期"
              :disabled="isDisableStatus">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="到账日期" prop="termAccountDate">
            <el-date-picker
              v-model="temp.termAccountDate"
              type="date" class="input_width"
              value-format="yyyy-MM-dd" format="yyyy-MM-dd"
              placeholder="选择到账日期"
              :disabled="isDisableStatus">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="税额" prop="ocTaxAmt">
            <el-input v-model="temp.ocTaxAmt" :maxlength="20" clearable disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item  prop="isInitial">
            <el-checkbox label="是否期初" v-model="temp.isInitial" :disabled="isDisableStatus" @change="isInitialChange"
                         :checked="temp.isInitial == 1" :key="temp.isInitial" true-label="1" false-label="0"></el-checkbox>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="temp.remark" :maxlength="20" clearable></el-input>
          </el-form-item>
          <el-form-item label="收付款协议" prop="agreementId">
            <el-select v-model="temp.agreementId" placeholder="请选择"
                       :clearable="true" class="input_width" :disabled="isDisableStatus">
              <el-option
                v-for="item in incomePayAgreementList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="总额" prop="originalCurrencySum">
            <el-input v-model="temp.originalCurrencySum" :maxlength="20" :disabled="originalCurrencySumDisableFlag"></el-input>
          </el-form-item>
          <el-form-item label="无税金额" prop="ocNoTaxAmt">
            <el-input v-model="temp.ocNoTaxAmt" :maxlength="20" clearable disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 明细  -->
      <div style="width: 100%; margin-bottom: 10px; margin-left: 10px;">
        <el-button style="float: left" size="small" icon="el-icon-minus" @click="removeDetail" :disabled="isDisableStatus"></el-button>
      </div>
      <div style="clear: both"></div>
    </el-form>
    <el-table :key='tableKey' ref="multipleTable" :data="detailList" border fit highlight-current-row max-height="400"
              style="width: 99%; margin-top:5px; margin-left: 10px;" @selection-change="handleDetailSelectionChange">
      <el-table-column type="selection" fixed="left"></el-table-column>
      <!--<el-table-column align="center" label="收支项目" width="120">-->
        <!--<template slot-scope="scope">-->
          <!--<el-select v-model="scope.row.ipItemId" placeholder="请选择"-->
                     <!--:clearable="true" :disabled="isDisableStatus">-->
            <!--<el-option-->
              <!--v-for="item in incomePayItemList"-->
              <!--:key="item.id"-->
              <!--:label="item.name"-->
              <!--:value="item.id">-->
            <!--</el-option>-->
          <!--</el-select>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column align="center" label="来源单据号" width="160">
        <template slot-scope="scope">
          <span>{{scope.row.sourceOrderCode}}</span>
        </template>
      </el-table-column>
      <!--<el-table-column align="center" label="存货" width="120">-->
        <!--<template slot-scope="scope">-->
          <!--<el-select v-model="scope.row.stockGoodsId" placeholder="请选择"-->
                     <!--:clearable="true" :disabled="isDisableStatus">-->
            <!--<el-option-->
              <!--v-for="item in stockGoodList"-->
              <!--:key="item.id"-->
              <!--:label="item.name"-->
              <!--:value="item.id">-->
            <!--</el-option>-->
          <!--</el-select>-->
        <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column align="center" label="供应商" width="300">
        <template slot-scope="scope">
          <span>{{scope.row.partnerName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="数量" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.qty}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="单价" width="140">
        <template slot-scope="scope">
          <span>{{scope.row.price}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="车型" width="170">
        <template slot-scope="scope">
          <span>{{scope.row.goodsModel}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="起运地" width="170">
        <template slot-scope="scope">
          <span>{{scope.row.fromCityName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="目的地" width="170">
        <template slot-scope="scope">
          <span>{{scope.row.destCityName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="摘要" width="350">
        <template slot-scope="scope">
          <el-input v-model="scope.row.summary" :maxlength="20" clearable :disabled="isDisableStatus"></el-input>
        </template>
      </el-table-column>
    </el-table>

    <!-- 业务订单列表 -->
    <el-dialog title="业务订单" :visible.sync="payableOrderDialogStatus" width="70%">
      <el-row>
        <el-col :span="24" style="text-align: right">
          <el-input v-model="orderCondition.orderCode" clearable
                    size="small" style="width: 200px" class="filter-item fsc-search" placeholder="系统订单号">
          </el-input>
          <el-button class="filter-item" size="small" type="primary"
                     v-waves icon="el-icon-search" @click="payOrderSearch">搜索
          </el-button>
        </el-col>
      </el-row>
      <el-table :key='tableKey' ref="orderTable" :data="payableOrderList" v-loading="listLoading"
                element-loading-text="给我一点时间" border fit highlight-current-row max-height="400"
                style="width: 99%; margin-top:5px; margin-left: 10px;" @selection-change="handleOrderSelectionChange">
        <el-table-column align="center" type="selection" fixed width="40"></el-table-column>
        <el-table-column align="center" prop="dispatchNo" label="发运流水号" width="150" fixed></el-table-column>
        <el-table-column align="center" prop="checkingNo" label="对账单号" width="120" fixed></el-table-column>
        <el-table-column align="center" prop="doNo" label="调度指令" width="120" fixed></el-table-column>
        <el-table-column align="center" prop="orderCode" label="系统订单号" width="120" fixed></el-table-column>
        <el-table-column align="center" prop="vin" label="车架号" width="180" fixed></el-table-column>
        <el-table-column align="center" prop="waybillState" label="运单状态" width="100"></el-table-column>
        <el-table-column align="center" prop="customerName" label="客户名称" width="150"></el-table-column>
        <el-table-column align="center" prop="payee" label="收款单位" width="200"></el-table-column>
        <el-table-column align="center" prop="transMode" label="运输方式" width="100"></el-table-column>
        <el-table-column align="center" prop="vehiclePlate" label="车牌号" width="100"></el-table-column>
        <el-table-column align="center" prop="motorman" label="司机" width="100"></el-table-column>
        <el-table-column align="center" prop="cusWaybillNo" label="客户运单号" width="150"></el-table-column>
        <el-table-column align="center" prop="dispatchTime" label="发运日期" width="100"></el-table-column>
        <el-table-column align="center" prop="receiptTime" label="回单日期" width="100"></el-table-column>
        <el-table-column align="center" prop="checkBillDate" label="对账日期" width="100"></el-table-column>
        <el-table-column align="center" prop="destProvinceName" label="目的省" width="100"></el-table-column>
        <el-table-column align="center" prop="destCityName" label="目的地" width="100"></el-table-column>
        <el-table-column align="center" prop="settleAmt" label="结算数量" width="100"></el-table-column>
        <el-table-column align="center" prop="totalCost" label="小计" width="100"></el-table-column>
        <el-table-column align="center" prop="contractStatus" label="合同状态" width="100"></el-table-column>
        <el-table-column align="center" prop="whetherTheValue" label="是否暂估" width="100"></el-table-column>
        <el-table-column align="center" prop="accountPayablePeriod" label="应付账期" width="100"></el-table-column>
        <el-table-column align="center" prop="paymentTerm" label="付款期" width="100"></el-table-column>
        <el-table-column align="center" prop="receivable" label="应收" width="100"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="payableOrderDialogStatus = false">取 消</el-button>
        <el-button type="primary" @click="handleToAddDetail">添 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { create, deletedForBatch, update, getShouldPaymentById, computerPrice } from '@/api/pay/shouldPayment'
  import { getPayableOrderList } from '@/api/pay/payableOrder'
  import { getPartnerList, getStaffList, getDepartmentList, getShouldPaymentTypeListByBusinessType,
    getCompanyList, getIncomePayItemList, getStockGoodList, getFiscalPeriodDetailList, getIncomePayAgreementSelectList, getProjectItemList } from '@/api/baseDataCommon'
  import waves from '@/directive/waves'
  export default {
    name: 'shouldPaymentEdit',
    directives: {
      waves
    },
    data() {
      var checkNumber = (rule, value, callback) => {
        // var numberReg = new RegExp('^[0-9]+.?[0-9]*$')
        var numberReg = new RegExp('^(([1-9]\\d*)|0)(\\.\\d{1,8})?$')
        if (!numberReg.test(value)) {
          callback(new Error('请输入数字值, 且小数点最后8位'))
        } else {
          callback()
        }
      }
      return {
        key: 1, // table key
        desc: true,
        isUpdate: 0,
        isDisableStatus: false,
        fiscalPeriodFlag: false,
        shouldPaymentId: 0,
        tableKey: 0,
        list: null,
        payableOrderList: [],
        detailList: [],
        partnerList: null,
        staffList: null,
        departmentList: null,
        shouldPaymentTypeList: null,
        companyList: null,
        stockGoodList: null,
        incomePayItemList: null,
        fiscalPeriodDetailList: null,
        incomePayAgreementList: null,
        projectItemList: null,
        multipleSelection: [],
        detailListSelect: [],
        payableOrderPartnerId: undefined,
        listLoading: false,
        dialogFormVisible: false,
        payableOrderDialogStatus: false,
        orderSelectList: [],
        orderCondition: {
          subsuppliersId: '',
          orderCode: ''
        },
        temp: {
          id: undefined,
          docType: '',
          docDate: '',
          settlCompanyId: '',
          mainCompanyId: '',
          partnerId: '',
          isInitial: undefined,
          remark: '',
          fiscalPeriod: undefined,
          departmentId: undefined,
          staffId: undefined,
          agreementId: undefined,
          termAccountDate: '',
          originalCurrencySum: 0,
          ipItemId: undefined,
          stockGoodsId: undefined,
          ocTaxAmt: undefined,
          ocNoTaxAmt: undefined,
          cess: undefined,
          project: '',
          detailList: []
        },
        detailTemp: {
          ipItemId: 0,
          sourceOrderCode: '',
          partnerName: '',
          partnerId: '',
          stockGoodsId: undefined,
          qty: 0,
          price: 0,
          ocAmt: 0,
          summary: ''
        },
        dialogStatus: '',
        textMap: {
          update: '编辑',
          create: '创建'
        },
        computerFormVO: {
          cess: 0,
          allPrice: 0,
          voList: []
        },
        rules: {
          // docCode: [{ required: true, message: '单据号不能为空', trigger: 'change' }],
          docType: [{ required: true, message: '单据类型不能为空', trigger: 'change' }],
          docDate: [{ required: true, message: '单据日期不能为空', trigger: 'change' }],
          buildAccountDate: [{ required: true, message: '立账日期不能为空', trigger: 'change' }],
          mainCompanyId: [{ required: true, message: '主体公司不能为空', trigger: 'change' }],
          settlCompanyId: [{ required: true, message: '结算公司不能为空', trigger: 'change' }],
          partnerId: [{ required: true, message: '供应商不能为空', trigger: 'change' }],
          // fiscalPeriod: [{ required: true, message: '会计期间不能为空', trigger: 'change' }],
          // agreementId: [{ required: true, message: '收付款协议不能为空', trigger: 'change' }],
          invoiceCode: [{ required: true, message: '发票号不能为空', trigger: 'change' }],
          invoiceDate: [{ required: true, message: '发票日期不能为空', trigger: 'change' }],
          termAccountDate: [{ required: true, message: '到账日期不能为空', trigger: 'change' }],
          project: [{ required: true, message: '醒目辅助不能为空', trigger: 'change' }],
          cess: [{ required: true, message: '税率不能为空', trigger: 'change' }],
          originalCurrencySum: [{ validator: checkNumber, trigger: 'change' }]
        },
        detailRules: {
          stockGoodsId: [{ required: true, message: '存货不能为空', trigger: 'change' }],
          qty: [{ required: true, message: '存货不能为空', trigger: 'change' }]
        },
        queryBusinessType: ['10', '20', '30', '40', '50'],
        originalCurrencySumDisableFlag: true,
        cessList: [{ 'id': 0.00, 'value': '0%' }, { 'id': 0.06, 'value': '6%' }, { 'id': 0.11, 'value': '11%' }]
      }
    },
    created() {
      this.initPartnerList()
      this.initStaffList()
      this.initDepartmentList()
      this.initShouldPaymentTypeList()
      this.initCompanyList()
      this.initIncomePayItemList()
      this.initStockGoodList()
      this.initFiscalPeriodDetailList()
      this.initcomPyaAgreementSelectList()
      this.initProjectItemList()
      this.detailList = []
      this.temp.cess = 0.11
      // 取到路由带过来的参数
      // 将数据放在当前组件的数据内
      const paramClass = this.$route.params
      this.isUpdate = paramClass.isUpdate
      if (this.isUpdate === 1) {
        this.shouldPaymentId = paramClass.shouldPaymentId
        // 如果是编辑修改需要去获取数据
        // this.getShouldPaymentById()
        this.temp = this.$route.params.shouldPaymentObj
        this.detailList = this.$route.params.shouldPaymentObj.detailList
        if (this.temp.status !== 0) {
          this.isDisableStatus = true
          this.fiscalPeriodFlag = true
          this.originalCurrencySumDisableFlag = true
        } else if (this.temp.businessType === '20' || this.temp.businessType === '30') {
          // 设置总额是否可以编辑
          this.originalCurrencySumDisableFlag = false
          if (this.temp.isInitial !== 1) {
            this.fiscalPeriodFlag = false
          } else {
            this.fiscalPeriodFlag = true
            this.temp.fiscalPeriod = null
          }
        } else {
          if (this.temp.isInitial !== 1) {
            this.fiscalPeriodFlag = false
          } else {
            this.fiscalPeriodFlag = true
            this.temp.fiscalPeriod = null
          }
        }

        if (this.detailList != null && this.detailList.length > 0) {
          for (var i = 0; i <= this.detailList.length; i++) {
            var detail = this.detailList[i]
            this.orderSelectList.push({
              price: detail.price,
              amt: detail.qty
            })
          }
        }
      }
    },
    methods: {
      getShouldPaymentById() {
        // 获取编辑数据
        if (this.shouldPaymentId != null && this.shouldPaymentId !== 0) {
          getShouldPaymentById(this.shouldPaymentId).then(response => {
            // 需要修改的数据
            this.temp = response.data
            this.detailList = response.data.detailList
          })
        }
      },
      // 初始化经销商下拉
      initPartnerList() {
        getPartnerList().then(response => {
          this.partnerList = response.data
        })
      },
      // 初始化人员下拉
      initStaffList() {
        getStaffList().then(response => {
          this.staffList = response.data
        })
      },
      // 初始部门下拉
      initDepartmentList() {
        getDepartmentList().then(response => {
          this.departmentList = response.data
        })
      },
      // 初始化单据类型
      initShouldPaymentTypeList() {
        getShouldPaymentTypeListByBusinessType(this.queryBusinessType).then(response => {
          this.shouldPaymentTypeList = response.data
        })
      },
      // 初始化公司下拉
      initCompanyList() {
        getCompanyList().then(response => {
          this.companyList = response.data
        })
      },
      // 初始化收支项目下拉
      initIncomePayItemList() {
        getIncomePayItemList().then(response => {
          this.incomePayItemList = response.data
        })
      },
      // 初始化存货下拉
      initStockGoodList() {
        getStockGoodList().then(response => {
          this.stockGoodList = response.data
        })
      },
      // 初始化会计期间
      initFiscalPeriodDetailList() {
        getFiscalPeriodDetailList().then(response => {
          this.fiscalPeriodDetailList = response.data
        })
      },
      // 初始化收付款协议
      initcomPyaAgreementSelectList() {
        // 收付
        getIncomePayAgreementSelectList().then(response => {
          this.incomePayAgreementList = response.data
        })
      },
      // 初始化项目辅助核算
      initProjectItemList() {
        getProjectItemList().then(response => {
          this.projectItemList = response.data
        })
      },
      handleDetailSelectionChange(val) {
        // 明细勾选变化
        this.detailListSelect = val
      },
      docTypeChange(val) {
        const index = this.shouldPaymentTypeList.findIndex(d => d.id === val)
        var businessType = this.shouldPaymentTypeList[index].businessType
        if (businessType === '20' || businessType === '30') {
          this.originalCurrencySumDisableFlag = false
        } else {
          this.originalCurrencySumDisableFlag = true
          // this.temp.originalCurrencySum = 0
          // TODO 重新计算总价
          // computerPrice(this.orderSelectList).then(response => {
          //   this.temp.originalCurrencySum = response.data
          // })
          this.cleanComputer()
          computerPrice(this.computerFormVO).then(response => {
            this.temp.originalCurrencySum = response.data.price
            this.temp.ocTaxAmt = response.data.ocTaxAmt
            this.temp.ocNoTaxAmt = response.data.ocNoTaxAmt
          })
        }
      },
      priceOrCessChange() {
        this.cleanComputer()
        console.info(this.computerFormVO)
        computerPrice(this.computerFormVO).then(response => {
          console.info(response.data)
          this.temp.originalCurrencySum = response.data.price
          this.temp.ocTaxAmt = response.data.ocTaxAmt
          this.temp.ocNoTaxAmt = response.data.ocNoTaxAmt
        })
      },
      allPriceChange(changePrice) {
        this.cleanComputer()
        console.info(changePrice)
        console.info(this.computerFormVO)
        computerPrice(this.computerFormVO).then(response => {
          console.info(response.data)
          this.temp.originalCurrencySum = response.data.price
          this.temp.ocTaxAmt = response.data.ocTaxAmt
          this.temp.ocNoTaxAmt = response.data.ocNoTaxAmt
        })
      },
      removeDetail() {
        // 移除
        var orderCodeArray = []
        this.detailListSelect.forEach(function(item, index, array) {
          orderCodeArray.push(item.sourceOrderCode)
        })
        for (var i = 0; i < orderCodeArray.length; i++) {
          this.removeList(orderCodeArray[i])
        }
      },
      removeList(id) {
        const index = this.detailList.findIndex(d => d.sourceOrderCode === id)
        this.detailList.splice(index, 1)
      },
      handleColseTab() {
        // 关闭tab页面
        var currentView = this.$route
        this.$store.dispatch('delVisitedViews', currentView).then((views) => {
          if (this.isActive(currentView)) {
            const latestView = views.slice(-1)[0]
            if (latestView) {
              this.$router.push(latestView.path)
            } else {
              this.$router.push('/')
            }
          }
        })
      },
      isActive(route) {
        return route.path === this.$route.path || route.name === this.$route.name
      },
      handleToAddDetail() {
        // 确定添加明细
        if (this.orderSelectList.length <= 0) {
          this.warnMessage('请选择要添加的业务订单')
          return
        }
        // findIndex(d => d.id === id)
        var errorMssage = this.checkLisIsExit(this.detailList, this.orderSelectList)
        if (errorMssage != null && errorMssage.length > 0) {
          this.warnMessage(errorMssage + '单号已经存在')
          return
        }
        // var re = /^[0-9]+.?[0-9]*$/
        // var allOriginalCurrencySum = 0
        for (var i = 0; i < this.orderSelectList.length; i++) {
          var orderSelect = this.orderSelectList[i]
          var detail = {
            ipItemId: undefined,
            sourceOrderCode: orderSelect.orderCode,
            partnerName: orderSelect.subsuppliers,
            stockGoodsId: undefined,
            qty: orderSelect.amt,
            price: orderSelect.price,
            ocAmt: 0,
            summary: '',
            fromCityName: orderSelect.fromCityName,
            destCityName: orderSelect.destCityName,
            goodsModel: orderSelect.goodsModel
          }
          this.detailList.push(detail)
          this.payableOrderPartnerId = this.orderCondition.subsuppliersId
        }
        this.cleanComputer()
        computerPrice(this.computerFormVO).then(response => {
          this.temp.originalCurrencySum = response.data.price
          this.temp.ocTaxAmt = response.data.ocTaxAmt
          this.temp.ocNoTaxAmt = response.data.ocNoTaxAmt
        })
        this.payableOrderDialogStatus = false
      },
      cleanComputer() {
        this.computerFormVO = {
          cess: 0,
          allPrice: 0,
          voList: []
        }
        this.computerFormVO = {
          cess: this.temp.cess,
          allPrice: this.temp.price,
          voList: this.orderSelectList
        }
      },
      checkLisIsExit(detailList, orderSelectList) {
        var repeatOrder = ''
        for (var i = 0; i < detailList.length; i++) {
          for (var k = 0; k < orderSelectList.length; k++) {
            if (detailList[i].sourceOrderCode === orderSelectList[k].orderCode) {
              repeatOrder += orderSelectList[k].orderCode + ', '
            }
          }
        }
        return repeatOrder
      },
      handleOrderSelectionChange(val) {
        // 业务订单选中
        this.orderSelectList = val
      },
      queryPayOrderList() {
        if (!this.temp.partnerId) {
          this.warnMessage('供应商不能为空')
          return
        } else {
          this.payableOrderList = []
          this.orderCondition.subsuppliersId = this.temp.partnerId
          getPayableOrderList(this.orderCondition).then(response => {
            this.payableOrderList = response.data
            if (this.payableOrderList.length <= 0) {
              this.warnMessage('找不到对应的业务订单数据')
            } else {
              this.payableOrderDialogStatus = true
            }
          })
        }
      },
      handleClean() {
        // 清空数据
        this.resetTemp()
        this.detailList = []
        this.fiscalPeriodFlag = false
        this.originalCurrencySumDisableFlag = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      payOrderSearch() {
        // 订单查询
        getPayableOrderList(this.orderCondition).then(response => {
          this.payableOrderList = response.data
          if (this.payableOrderList.length <= 0) {
            this.warnMessage('找不到对应的业务订单数据')
          }
        })
      },
      createData() {
        // 校验明细的收支项目是否
        var checkResult = this.checkAddAndUpdate()
        if (checkResult === false) {
          return
        }
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.temp.detailList = this.detailList
            // this.temp.originalCurrencySum = 0
            if (this.temp.isInitial === '1') {
              this.temp.fiscalPeriod = null
            }
            create(this.temp).then(response => {
              this.handleClean()
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
            })
          }
        })
      },
      handleUpdate() {
        if (this.multipleSelection.length <= 0) {
          this.warnMessage('请选择要编辑的数据!')
          return
        }
        if (this.multipleSelection.length > 1) {
          this.warnMessage('只能选择一条数据!')
          return
        }
        this.resetTemp()
        this.dialogStatus = 'update'
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      // 新增和编辑时候的校验
      checkAddAndUpdate() {
        // 判断单据类型
        const index = this.shouldPaymentTypeList.findIndex(d => d.id === this.temp.docType)
        var businessType = this.shouldPaymentTypeList[index].businessType
        if (businessType === '20' || businessType === '30') {
          if (this.detailList.length > 0) {
            this.warnMessage('单据类型为借项通知单或贷项通知单的无须明细')
            return false
          }
        } else {
          if (this.detailList.length <= 0) {
            this.warnMessage('明细为空')
            return false
          }
        }
        return true
      },
      handleDelete() {
        if (this.multipleSelection.length <= 0) {
          this.warnMessage('请选择要删除的数据!')
          return
        }
        this.messageUtil('是否确定删除选中的数据?', '已取消删除', this.handleTrueDelete)
      },
      handleTrueDelete() {
        var ids = []
        this.multipleSelection.forEach(function(item, index, array) {
          ids.push(item.id)
        })
        deletedForBatch(ids).then(response => {
          if (response.code === 0) {
            this.$router.splice({
              path: 'shouldPaymentEdit',
              name: '应付录入'
            })
            this.$notify({
              title: '成功',
              message: response.message,
              type: 'success',
              duration: 2000
            })
          } else {
            this.$notify.error({
              title: '失败',
              message: response.message,
              duration: 2000
            })
          }
        })
      },
      updateData() {
        // 前置校验
        var checkResult = this.checkAddAndUpdate()
        if (!checkResult) {
          return
        }
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.temp.detailList = this.detailList
            // this.temp.originalCurrencySum = 0
            if (this.temp.isInitial === '1') {
              this.temp.fiscalPeriod = null
            }
            update(this.temp).then(response => {
              // this.$router.push({
              //   path: 'shouldPayment',
              //   name: '应付列表'
              // })
              // 关闭当前页面
              this.handleColseTab()
              this.$notify({
                title: '成功',
                message: response.message,
                type: 'success',
                duration: 2000
              })
            })
          }
        })
      },
      isInitialChange(val) {
        if (val === '1') {
          this.fiscalPeriodFlag = true
          this.temp.fiscalPeriod = null
        } else {
          this.fiscalPeriodFlag = false
        }
      },
      resetTemp() {
        this.temp = {
          id: undefined,
          docCode: '',
          docType: '',
          docDate: '',
          settlCompanyId: '',
          mainCompanyId: '',
          partnerId: '',
          isInitial: undefined,
          remark: '',
          fiscalPeriod: undefined,
          departmentId: undefined,
          staffId: undefined,
          agreementId: undefined,
          termAccountDate: '',
          originalCurrencySum: 0,
          detailList: []
        }
      },
      warnMessage(message) {
        this.$notify({
          title: '警告',
          message: message,
          type: 'warning',
          duration: 2000
        })
        return
      },
      messageUtil(titleMessage, catchMessage, toFunction) {
        this.$confirm(titleMessage, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          toFunction()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: catchMessage
          })
        })
      }
    }
  }
</script>

<style scoped>
  .input_width {
    width: 100%;
  }
</style>

